<template>
    <h2>标题</h2>
    <h3>{{ person.name }}</h3>
    <h3>{{ person.age }}</h3>
    <button @click="person.name+='~'">name+</button>
    <br>
    <button @click="person.age++">age+</button>
  </template>
  
  <script>
  import{reactive,watch} from 'vue'
  export default {
    name: "WatchDeml",
    components: {},
    setup(props,context) {
      let person=reactive({name:'张三',age:18})
      watch(person,(newVal,oldVal)=>{
        console.log('person old:',oldVal,'new:',newVal)
      })
      return {
        person
      };
    },
  };
  </script>
  
  <style>
  </style>
  